<template>
	<view>
		<u-popup v-model="showshuo" mode="center" :mask-close-able="false" border-radius="30">
					<view class="popup">
						<view class="title">
							成为商家申请说明
						</view>
						
						<view class="content">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
							Aenean euismod bibendum laoreet. Proin gravida dolor sit amet 
							lacus accumsan et viverra justo commodo. Proin sodales pulvinar 
							sic tempor. Sociis natoque penatibus et magnis dis parturient monte
							s, nascetur ridiculus mus. Nam fermentum, nulla
							 luctus pharetra vulputate, felis tellus mollis orci, sed rh
							 oncus pronin sapien nunc accuan eget.
						</view>
						
						<view class="back" @click="showshuo=false">
							返回
						</view>
					</view>
		</u-popup>
		
		<image class="image1" src="/static/users/becomeshop.png" mode=""></image>

		<view class="main">
			<view class="datu">
				<view class="lefts">
					<view class="quans"></view>
					<view class="zis1">商铺头像</view>
				</view>
				<view class="uoload">
					<u-upload width="180" height="180" max-count="1" max-size="1024*7" image-mode="aspectFill"
						class="upload" ref="uUpload" :action="action" :auto-upload="false" del-bg-color="#000"
						:file-list="fileList"></u-upload>
				</view>
			</view>

			<view class="datu">
				<view class="lefts">
					<view class="quans"></view>
					<view class="zis1">店铺背景</view>
				</view>
				<view class="uoload">
					<u-upload width="180" height="180" max-count="1" max-size="1024*7" image-mode="aspectFill"
						class="upload" ref="uUpload" :actions="action" :auto-upload="false" del-bg-color="#000"
						:file-list="fileLists"></u-upload>
				</view>
			</view>

			<view class="left">
				<view class="quan"></view>
				<view class="zi1">店铺名称</view>
			</view>
			<view class="lei">
				<input type="text" value="" placeholder="请输入店铺名称(8字内)" />
			</view>


			<view class="left">
				<view class="quan"></view>
				<view class="zi1">商品分类</view>
			</view>
			<view class="lei" @click="show=true">
				{{value}}
				<image src="../../static/users/right.png" mode=""></image>
			</view>
			<u-select @confirm="confirm" v-model="show" :list="list"></u-select>

			<view class="left">
				<view class="quan"></view>
				<view class="zi1">店铺简介</view>
			</view>
			<view class="kuang">
				<textarea value="" placeholder="请输入店铺简介" />
			</view>

			<view class="left">
				<view class="quan"></view>
				<view class="zi1">营业时间</view>
			</view>
			<view class="lei" @click="show2=true">
				{{value2}}
				<image src="../../static/users/right.png" mode=""></image>
			</view>
			<!-- <u-select @confirm="confirm2" v-model="show2" :list="list2"></u-select> -->
			<u-picker title="营业开始时间" @confirm="confirm2" mode="time" v-model="show2" :params="params"></u-picker>
			<u-picker title="选择打烊时间" @confirm="confirm3" mode="time" v-model="show3" :params="params"></u-picker>

			<view class="left">
				<view class="quan"></view>
				<view class="zi1">联系人</view>
			</view>
			<view class="lei">
				<input type="text" value="" placeholder="请输入联系人名字(5字内)" />
			</view>

			<view class="left">
				<view class="quan"></view>
				<view class="zi1">联系电话</view>
			</view>
			<view class="lei">
				<input type="text" value="" placeholder="请输入联系电话" />
			</view>

			<view class="left">
				<view class="quan"></view>
				<view class="zi1">微信</view>
			</view>
			<view class="lei">
				<input type="text" value="" placeholder="请输入微信号" />
			</view>

			<view class="left">
				<view class="quan"></view>
				<view class="zi1">QQ</view>
			</view>
			<view class="lei">
				<input type="text" value="" placeholder="请输入QQ号" />
			</view>

		</view>


		<view class="yijian">
			<u-checkbox-group >
				<u-checkbox v-model="values" active-color="black"
					name="name">
					<text class="text1">已阅读并同意</text>
					  <text class="text2">《商家入驻协议》</text></u-checkbox>
			</u-checkbox-group>
		</view>
		
		<view class="over" @click="next">
			下一步
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com/upload',
				fileList: [],
				actions: 'http://www.example.com/upload',
				fileLists: [],
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					},
					{
						value: '2',
						label: '河'
					},
					{
						value: '2',
						label: '海'
					}
				],
				showshuo:true,
				value: "请选择店铺类型",
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				show2: false,
				value2: "请选择营业时间",
				show3: false,
				values:""
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.value = e[0].label
			},

			confirm2(e) {
				console.log(e);
				setTimeout(() => {
					this.show3 = true
				}, 400)

				this.value2 = e.hour + ':' + e.minute + "--"
			},
			confirm3(e) {
				console.log(e);
				this.value2 = this.value2 + e.hour + ':' + e.minute
			},
			next(){
				uni.navigateTo({
					url:"../nextshop/nextshop"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
	}
	.popup{
		padding: 40rpx;
		width: 600rpx;
		// height: 446rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		.title{
			margin: 0 auto;
			width: 240rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
		}
		.content{
			margin: 30rpx auto;
			width: 511rpx;
			// height: 187rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #181818;
		}
		.back{
			margin: 30rpx auto;
			width: 230rpx;
			height: 68rpx;
			background: #181818;
			border-radius: 34rpx;
		    text-align: center;
			line-height: 68rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	.over {
		// position: fixed;
		// bottom: 50rpx;
		// left: 30rpx;
		margin: 10rpx 0 50rpx 30rpx;
		width: 690rpx;
		height: 100rpx;
		background: #181818;
		box-shadow: 0px 10rpx 40rpx 0px rgba(24, 24, 24, 0.26);
		border-radius: 50rpx;
	
		text-align: center;
		line-height: 100rpx;
	
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	
    .yijian{
		margin: 30rpx;
		.text1{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		}
		.text2{
			font-size: 24rpx;
			color: #F48F5B;
		}
	}
	.image1 {
		display: block;
		margin: 20rpx auto;
		width: 690rpx;
		height: 200rpx;
	}

	.main {
		padding: 30rpx;
		margin: 20rpx auto;
		width: 690rpx;
		// height: 1764rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.left {
			position: relative;

			.quan {
				width: 10rpx;
				height: 10rpx;
				background: #FF4646;
				border-radius: 50%;
				position: absolute;
				top: 15rpx;
			}

			.zi1 {
				margin: 15rpx 0 20rpx 20rpx;
			}
		}

		.lei {
			padding: 0 30rpx;
			margin: 20rpx 0 30rpx 0;
			width: 630rpx;
			height: 80rpx;
			background: #F2F4FA;
			border-radius: 40rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #181818;
			position: relative;

			input {
				width: 400rpx;
				height: 80rpx;
			}

			image {
				position: absolute;
				right: 40rpx;
				top: 35rpx;
				width: 8rpx;
				height: 15rpx;
			}

		}

		.kuang {
			margin: 20rpx 0 0 0;
			padding: 20rpx;
			width: 630rpx;
			height: 120rpx;
			background: #F2F4FA;
			border-radius: 30rpx;

			textarea {
				height: 80rpx;
			}
		}


		.datu {
			width: 630rpx;
			height: 200rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;

			.lefts {
				position: relative;
				top: 80rpx;

				.quans {
					width: 10rpx;
					height: 10rpx;
					background: #FF4646;
					border-radius: 50%;
					position: absolute;
					top: 17rpx;
				}

				.zis1 {
					margin: 0rpx 0 0 20rpx;
				}
			}
		}
	}
</style>
